<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .hong {
        color: red;
    }
</style>
<body>


<div id="app">

    点击哪个哪个变红
    <ul>
        <li @click="dianji(index)" :class="{hong:i==index}" v-for="(item , index) in movies">{{item}}</li>
    </ul>

    <p>全名为：{{fullName}}</p>

    <p>书籍价格为：{{allPrice}}</p>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['电影1', '电影2', '电影3', '电影4'],
            i: 0,
            firstName: 'xiao',
            lastName: 'ming',
            books: [
                {id: 10, name: '书本1', price: 20, num: 3},
                {id: 11, name: '书本2', price: 30, num: 5},
                {id: 12, name: '书本3', price: 40, num: 6}]
        },
        methods: {
            dianji(index) {
                this.i = index1
            }
        },
        computed: {
            fullName() {
                return this.firstName + this.lastName;
            },
            allPrice() {
                return this.books.reduce((total, item) => {
                    return total += item.price * item.num;
                }, total = 0)
            }
        }
    })
</script>


</body>

</html>